iT邦幫忙

2023 iThome 鐵人賽
DAY 24
0
Modern Web

給心理人的前端網頁開發系列 第 24 篇

[給心理人的前端網頁開發] 24 關卡三：網路實驗 - jsPsych Demo Simple Reaction Time Task 資料解讀

15th鐵人賽
123 瀏覽

  • 分享至 

  • xImage
    •  

受試者做完實驗後，就是主試者開心看資料的時候了。通常資料整理會有這些流程

  1. 確認受試者有沒有亂填答。若有亂填答的話剔除掉
  2. 收集受試者到一個階段、並剔除不良資料後，資料數量足夠的話，就停止招募受試者
  3. 依照編碼整理資料、處理遺漏值等雜工
  4. 針對想探討的變項跑統計。常見的有 T-Test、ANOVA
  5. 針對統計的結果做出解釋

在這個 demo 研究中，我們會關注的欄位可能有這些：

  • subject_id: 受試者編號
  • color: 刺激材料的顏色。藍色 or 橘色
  • rt: 反應時間
  • correct: 是否作答正確

在真正拿到統計軟體跑統計前，整理後的資料可能會長這樣：

subject_id color rt
001 blue 300
001 orange 400
002 blue 500
002 orange 300

在 jsPsych 這個程式中，我們可以選擇要存 CSV 或是 JSON 格式的資料。CSV 是一般統計軟體如 SPSS、Excel 常見的資料格式。而 JSON 格式則比較常用在程式開發的資料傳輸上。兩者的樣子看起來如下：

CSV

"success","timeout","failed_images","failed_audio","failed_video","trial_type","trial_index","time_elapsed","internal_node_id","rt","stimulus","response","task","correct_response","correct"
"true","false","[]","[]","[]","preload","0","712","0.0-0.0","","","","","",""
"","","","","","html-keyboard-response","1","1618","0.0-1.0","906","Welcome to the experiment. Press any key to begin.","f","","",""
"","","","","","html-keyboard-response","2","2751","0.0-2.0","1133","
        <p>In this experiment, a circle will appear in the center 
        of the screen.</p><p>If the circle is <strong>blue</strong>, 
        press the letter F on the keyboard as fast as you can.</p>
        <p>If the circle is <strong>orange</strong>, press the letter J 
        as fast as you can.</p>
        <div style='width: 700px;'>
        <div style='float: left;'><img src='img/blue.png'></img>
        <p class='small'><strong>Press the F key</strong></p></div>
        <div style='float: right;'><img src='img/orange.png'></img>
        <p class='small'><strong>Press the J key</strong></p></div>
        </div>
        <p>Press any key to begin.</p>
      ","f","","",""
"","","","","","html-keyboard-response","3","5012","0.0-3.0-0.0","null","<div style=""font-size:60px;"">+</div>","null","fixation","",""
"","","","","","image-keyboard-response","4","5089","0.0-3.0-1.0","76","img/orange.png","j","response","j","true"
"","","","","","html-keyboard-response","5","6094","0.0-3.0-0.1","null","<div style=""font-size:60px;"">+</div>","null","fixation","",""
"","","","","","image-keyboard-response","6","6333","0.0-3.0-1.1","239","img/blue.png","f","response","f","true"
"","","","","","html-keyboard-response","7","6838","0.0-3.0-0.2","null","<div style=""font-size:60px;"">+</div>","null","fixation","",""
"","","","","","image-keyboard-response","8","7196","0.0-3.0-1.2","357","img/orange.png","j","response","j","true"
"","","","","","html-keyboard-response","9","8200","0.0-3.0-0.3","null","<div style=""font-size:60px;"">+</div>","null","fixation","",""
"","","","","","image-keyboard-response","10","8375","0.0-3.0-1.3","174","img/blue.png","f","response","f","true"
"","","","","","html-keyboard-response","11","9376","0.0-3.0-0.4","null","<div style=""font-size:60px;"">+</div>","null","fixation","",""
"","","","","","image-keyboard-response","12","9468","0.0-3.0-1.4","91","img/orange.png","j","response","j","true"
"","","","","","html-keyboard-response","13","11475","0.0-3.0-0.5","null","<div style=""font-size:60px;"">+</div>","null","fixation","",""
"","","","","","image-keyboard-response","14","11717","0.0-3.0-1.5","241","img/blue.png","f","response","f","true"
"","","","","","html-keyboard-response","15","12973","0.0-3.0-0.6","null","<div style=""font-size:60px;"">+</div>","null","fixation","",""
"","","","","","image-keyboard-response","16","13051","0.0-3.0-1.6","78","img/orange.png","j","response","j","true"
"","","","","","html-keyboard-response","17","14557","0.0-3.0-0.7","null","<div style=""font-size:60px;"">+</div>","null","fixation","",""
"","","","","","image-keyboard-response","18","14779","0.0-3.0-1.7","222","img/blue.png","f","response","f","true"
"","","","","","html-keyboard-response","19","15784","0.0-3.0-0.8","null","<div style=""font-size:60px;"">+</div>","null","fixation","",""
"","","","","","image-keyboard-response","20","16027","0.0-3.0-1.8","242","img/orange.png","j","response","j","true"
"","","","","","html-keyboard-response","21","16532","0.0-3.0-0.9","null","<div style=""font-size:60px;"">+</div>","null","fixation","",""
"","","","","","image-keyboard-response","22","16941","0.0-3.0-1.9","408","img/blue.png","f","response","f","true"
"","","","","","html-keyboard-response","23","17637","0.0-4.0","696","<p>You responded correctly on 100% of the trials.</p>
          <p>Your average response time was 213ms.</p>
          <p>Press any key to complete the experiment. Thank you!</p>","j","","",""

JSON

[
	{
		"success": true,
		"timeout": false,
		"failed_images": [],
		"failed_audio": [],
		"failed_video": [],
		"trial_type": "preload",
		"trial_index": 0,
		"time_elapsed": 3439,
		"internal_node_id": "0.0-0.0"
	},
	{
		"rt": 1706,
		"stimulus": "Welcome to the experiment. Press any key to begin.",
		"response": "f",
		"trial_type": "html-keyboard-response",
		"trial_index": 1,
		"time_elapsed": 5145,
		"internal_node_id": "0.0-1.0"
	},
	{
		"rt": 72144,
		"stimulus": "\n        <p>In this experiment, a circle will appear in the center \n        of the screen.</p><p>If the circle is <strong>blue</strong>, \n        press the letter F on the keyboard as fast as you can.</p>\n        <p>If the circle is <strong>orange</strong>, press the letter J \n        as fast as you can.</p>\n        <div style='width: 700px;'>\n        <div style='float: left;'><img src='img/blue.png'></img>\n        <p class='small'><strong>Press the F key</strong></p></div>\n        <div style='float: right;'><img src='img/orange.png'></img>\n        <p class='small'><strong>Press the J key</strong></p></div>\n        </div>\n        <p>Press any key to begin.</p>\n      ",
		"response": "f",
		"trial_type": "html-keyboard-response",
		"trial_index": 2,
		"time_elapsed": 77291,
		"internal_node_id": "0.0-2.0"
	},
	{
		"rt": null,
		"stimulus": "<div style=\"font-size:60px;\">+</div>",
		"response": null,
		"task": "fixation",
		"trial_type": "html-keyboard-response",
		"trial_index": 3,
		"time_elapsed": 80804,
		"internal_node_id": "0.0-3.0-0.0"
	},
	{
		"rt": 417,
		"stimulus": "img/orange.png",
		"response": "j",
		"task": "response",
		"correct_response": "j",
		"trial_type": "image-keyboard-response",
		"trial_index": 4,
		"time_elapsed": 81223,
		"internal_node_id": "0.0-3.0-1.0",
		"correct": true
	},
	{
		"rt": null,
		"stimulus": "<div style=\"font-size:60px;\">+</div>",
		"response": null,
		"task": "fixation",
		"trial_type": "html-keyboard-response",
		"trial_index": 5,
		"time_elapsed": 81976,
		"internal_node_id": "0.0-3.0-0.1"
	},
	{
		"rt": 522,
		"stimulus": "img/blue.png",
		"response": "f",
		"task": "response",
		"correct_response": "f",
		"trial_type": "image-keyboard-response",
		"trial_index": 6,
		"time_elapsed": 82498,
		"internal_node_id": "0.0-3.0-1.1",
		"correct": true
	},
	{
		"rt": null,
		"stimulus": "<div style=\"font-size:60px;\">+</div>",
		"response": null,
		"task": "fixation",
		"trial_type": "html-keyboard-response",
		"trial_index": 7,
		"time_elapsed": 84254,
		"internal_node_id": "0.0-3.0-0.2"
	},
	{
		"rt": 381,
		"stimulus": "img/orange.png",
		"response": "j",
		"task": "response",
		"correct_response": "j",
		"trial_type": "image-keyboard-response",
		"trial_index": 8,
		"time_elapsed": 84636,
		"internal_node_id": "0.0-3.0-1.2",
		"correct": true
	},
	{
		"rt": null,
		"stimulus": "<div style=\"font-size:60px;\">+</div>",
		"response": null,
		"task": "fixation",
		"trial_type": "html-keyboard-response",
		"trial_index": 9,
		"time_elapsed": 84891,
		"internal_node_id": "0.0-3.0-0.3"
	},
	{
		"rt": 552,
		"stimulus": "img/blue.png",
		"response": "f",
		"task": "response",
		"correct_response": "f",
		"trial_type": "image-keyboard-response",
		"trial_index": 10,
		"time_elapsed": 85444,
		"internal_node_id": "0.0-3.0-1.3",
		"correct": true
	},
	{
		"rt": null,
		"stimulus": "<div style=\"font-size:60px;\">+</div>",
		"response": null,
		"task": "fixation",
		"trial_type": "html-keyboard-response",
		"trial_index": 11,
		"time_elapsed": 86700,
		"internal_node_id": "0.0-3.0-0.4"
	},
	{
		"rt": 568,
		"stimulus": "img/blue.png",
		"response": "f",
		"task": "response",
		"correct_response": "f",
		"trial_type": "image-keyboard-response",
		"trial_index": 12,
		"time_elapsed": 87268,
		"internal_node_id": "0.0-3.0-1.4",
		"correct": true
	},
	{
		"rt": null,
		"stimulus": "<div style=\"font-size:60px;\">+</div>",
		"response": null,
		"task": "fixation",
		"trial_type": "html-keyboard-response",
		"trial_index": 13,
		"time_elapsed": 88525,
		"internal_node_id": "0.0-3.0-0.5"
	},
	{
		"rt": 309,
		"stimulus": "img/orange.png",
		"response": "j",
		"task": "response",
		"correct_response": "j",
		"trial_type": "image-keyboard-response",
		"trial_index": 14,
		"time_elapsed": 88834,
		"internal_node_id": "0.0-3.0-1.5",
		"correct": true
	},
	{
		"rt": null,
		"stimulus": "<div style=\"font-size:60px;\">+</div>",
		"response": null,
		"task": "fixation",
		"trial_type": "html-keyboard-response",
		"trial_index": 15,
		"time_elapsed": 90590,
		"internal_node_id": "0.0-3.0-0.6"
	},
	{
		"rt": 491,
		"stimulus": "img/orange.png",
		"response": "j",
		"task": "response",
		"correct_response": "j",
		"trial_type": "image-keyboard-response",
		"trial_index": 16,
		"time_elapsed": 91082,
		"internal_node_id": "0.0-3.0-1.6",
		"correct": true
	},
	{
		"rt": null,
		"stimulus": "<div style=\"font-size:60px;\">+</div>",
		"response": null,
		"task": "fixation",
		"trial_type": "html-keyboard-response",
		"trial_index": 17,
		"time_elapsed": 91586,
		"internal_node_id": "0.0-3.0-0.7"
	},
	{
		"rt": 499,
		"stimulus": "img/blue.png",
		"response": "f",
		"task": "response",
		"correct_response": "f",
		"trial_type": "image-keyboard-response",
		"trial_index": 18,
		"time_elapsed": 92086,
		"internal_node_id": "0.0-3.0-1.7",
		"correct": true
	},
	{
		"rt": null,
		"stimulus": "<div style=\"font-size:60px;\">+</div>",
		"response": null,
		"task": "fixation",
		"trial_type": "html-keyboard-response",
		"trial_index": 19,
		"time_elapsed": 93341,
		"internal_node_id": "0.0-3.0-0.8"
	},
	{
		"rt": 444,
		"stimulus": "img/orange.png",
		"response": "j",
		"task": "response",
		"correct_response": "j",
		"trial_type": "image-keyboard-response",
		"trial_index": 20,
		"time_elapsed": 93785,
		"internal_node_id": "0.0-3.0-1.8",
		"correct": true
	},
	{
		"rt": null,
		"stimulus": "<div style=\"font-size:60px;\">+</div>",
		"response": null,
		"task": "fixation",
		"trial_type": "html-keyboard-response",
		"trial_index": 21,
		"time_elapsed": 94041,
		"internal_node_id": "0.0-3.0-0.9"
	},
	{
		"rt": 475,
		"stimulus": "img/blue.png",
		"response": "f",
		"task": "response",
		"correct_response": "f",
		"trial_type": "image-keyboard-response",
		"trial_index": 22,
		"time_elapsed": 94517,
		"internal_node_id": "0.0-3.0-1.9",
		"correct": true
	},
	{
		"rt": 51834,
		"stimulus": "<p>You responded correctly on 100% of the trials.</p>\n          <p>Your average response time was 466ms.</p>\n          <p>Press any key to complete the experiment. Thank you!</p>",
		"response": "f",
		"trial_type": "html-keyboard-response",
		"trial_index": 23,
		"time_elapsed": 146349,
		"internal_node_id": "0.0-4.0"
	}
]

一般常見的統計軟體與程式，都有支援 CSV 格式的檔案。例如 SPSS、SAS、Excel。程式語言如 Python 跟 R，也都有對應的函式庫可以支援 CSV 格式的檔案。

但因為我想用 JavaScript 來整理資料，所以就以 JSON 格式為例。以下 JavaScript 程式碼可以取得這個受試者的測試結果資料：


// 1. 只留下刺激材料畫面的反應，且回答正確的數據
// 2. 每次反應的數據中，只留下 rt (反應時間)
// 3. 算出這個受試者的反應時間
var responses = data.filter(item => item.task === 'response' && item.correct === true)
var rt_list = responses.map(item => item.rt)
var rt_mean = rt_list.reduce((pre, cur) => pre + cur, 0) / rt_list.length // 465.8

// 算出這個受試者對藍色圖形的反應時間
var responses_blue = data.filter(item => item.task === 'response' && item.correct === true && item.stimulus === 'img/blue.png')
var rt_list_blue = responses_blue.map(item => item.rt)
var rt_mean_blue = rt_list_blue.reduce((pre, cur) => pre + cur, 0) / rt_list_blue.length // 523.2

// 算出這個受試者對橘色圖形的反應時間
var responses_orange = data.filter(item => item.task === 'response' && item.correct === true && item.stimulus === 'img/orange.png')
var rt_list_orange = responses_orange.map(item => item.rt)
var rt_mean_orange = rt_list_orange.reduce((pre, cur) => pre + cur, 0) / rt_list_orange.length // 408.4

這邊可以看出，這位受試者在對橘色圖形做出反應時，反應時間比較短。但這是否能推論到全人類都對橘色圖形有比較快的反應時間呢？不知道。所以就需要收集許多受試者的資料、跑統計，查看顏色變項不同水準間的差異，有沒有達到顯著。如果有顯著，才能說這個「橘色圖形有比較快的反應時間呢」的現象可能存在。（不過實際上應該不存在啦哈哈）

要特別聲明的是，這個 DEMO 程式雖然有設定 color 這個變項，且有綠色跟藍色這兩個水準，但我們並沒有給出實驗動機與假設，也沒說這個實驗想驗證什麼問題。因此可以說這不是個好實驗（沒有什麼學術價值），但它確實是個是個有實驗設計的實驗，並且對於學習 jsPsych 這個函式庫有幫助。

小結

有了每個受試者在不同變項的反應時間的程式後，我們當然也能知道全部受試者在不同變項的反應時間，最後就能做出統計軟體需要的資料格式，開開心心（？）的跑統計了～

明天來介紹看看其他的實驗。


上一篇
[給心理人的前端網頁開發] 23 關卡三：網路實驗 - jsPsych Demo Simple Reaction Time Task 解釋
下一篇
[給心理人的前端網頁開發] 25 關卡三：網路實驗 - jsPsych Stroop effect
系列文
給心理人的前端網頁開發 共 30 篇
  1. 26
    [給心理人的前端網頁開發] 26 關卡三：網路實驗 - jsPsych Stroop effect 程式面
  2. 27
    [給心理人的前端網頁開發] 27 關卡三：網路實驗 - jsPsych Stroop effect 資料面講解
  3. 28
    [給心理人的前端網頁開發] 28 關卡三：網路實驗 - jsPsych Eye Tracking
  4. 29
    [給心理人的前端網頁開發] 29 也許你不需要手刻網路實驗：心理學研究軟體方案整理
  5. 30
    [給心理人的前端網頁開發] 30 結語
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙